<!Doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
    <title>TEST</title>
    <style type="text/css">
        #test {
            position: fixed;
            z-index: 999;
            top: 45%;
            background: white;
            left: 0px;
            border: 3px solid rgb(221, 221, 221);
            padding: 2px;
            border-radius: 5px;
        }
        #content_shang {
            position: fixed;
            top: 50%;
            margin-top: -150px;
            left: 50px;
            background: #FBFBFB;
            display: none;
        }
        #content_shang fieldset {
            padding: 6px;
            margin: 3px;
        }
        #content_shang ul {
            margin: 0;
            padding: 0;
        }
        #content_shang li {
            list-style: none;
        }
        input[type=checkbox]:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="test">
        <button onclick="document.getElementById('content_shang').style.display=(document.getElementById('content_shang').style.display == 'block' ? 'none' : 'block')">设置</button>
    </div>
    <div id="content_shang">
        <fieldset>
            <legend title="">解析服务器</legend>
            <select id="flv_shang">
                <option value="ss">硕鼠</option>
                <option value="flv">飞驴</option>
            </select>
        </fieldset>
        <fieldset>
            <legend title="">默认清晰度</legend>
            <select id="qxd_shang">
                <option value="0">1080P[飞驴解析下]</option>
                <option value="1">超清</option>
                <option value="2">高清</option>
                <option value="3">标清</option>
            </select>
        </fieldset>
        <fieldset>
            <legend title="">播放器服务器</legend>
            <select id="which_shang">
                <option value="1">京东云</option>
                <option value="2">ckplayer官方[推荐]</option>
                <option value="3">azure</option>
            </select>
        </fieldset>
        <fieldset>
            <legend title="">港剧语言</legend>
            <input id="isgy_shang" type="checkbox">粤语
        </fieldset>
        <fieldset>
            <legend title="">注意</legend>
            点击确定产生
            <br>刷新页面应用设置
            <button id="confirm_shang">确定</button>
        </fieldset>
    </div>



    <script type="text/javascript">
        //初始化 
        (function ()
        {
            init();

        function init() {

            var option = {
                qingxidu: 1,
                isgy: false,
                flv: 'flv',
                which: 2
            };
            if (localStorage['shang_youkuvod']) {
                option = extend(option, JSON.parse(localStorage['shang_youkuvod']));
            }
            //界面选项显示
            setoptionchoose(document.getElementById('flv_shang').options, option.flv);
            setoptionchoose(document.getElementById('qxd_shang').options, option.qingxidu);
            setoptionchoose(document.getElementById('which_shang').options, option.which);
            document.getElementById('isgy_shang').checked = !option.isgy;
            //初始化事件
            document.getElementById('confirm_shang').onclick = function() {
                saveuseroption();
                location.href = location.href;
            }
            document.getElementById('content_shang').onmouseover = function() {
                clearTimeout(this.timer);
                this.style.display = 'block';
            }
            document.getElementById('content_shang').onmouseleave = function() {
                var _this = this;
                this.timer = setTimeout(function() {
                    _this.style.display = 'none';
                }, 1000);
            }
        }


        function setoptionchoose(optionobj, value) {
            for (var i = 0; i < optionobj.length; i++) {
                if (optionobj[i].value == value) {
                    optionobj[i].selected = true;
                }
            }
        }

        function saveuseroption() {
            var option = {};
            option.flv = getuseroption(document.getElementById('flv_shang').options);
            option.qingxidu = getuseroption(document.getElementById('qxd_shang').options);
            option.which = getuseroption(document.getElementById('which_shang').options);
            option.isgy = !document.getElementById('isgy_shang').checked;
            localStorage['shang_youkuvod'] = JSON.stringify(option);
        }

        function getuseroption(optionobj) {
            for (var i = 0; i < optionobj.length; i++) {
                if (optionobj[i].selected) {
                    return optionobj[i].value;
                }
            }
            return 0;
        }

        function extend(o1, o2) {
            for (key in o2) {
                o1[key] = o2[key];
            }
            return o1;
        }
        })();
    </script>
</body>

</html>
